<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <div class="c1">
            <div title="t1" id="id">{{ name }}</div>
            <div title="t2">{{ age }}</div>
            <div title="t3">{{ gender }}</div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
    <script src="./src/watcher.js"></script>
    <script src="./src/Dep.js"></script>
    <script src="./src/vnode.js"></script>
    <script src="./src/compiler.js"></script>
    <script src="./src/observe.js"></script>
    <script src="./src/JCVue.js"></script>

    <script>
        let app = new JCVue({
            el: '#root',
            data: {
                name: '张三',
                age: 30,
                gender: '男',
                children: [
                    { name: '张小一', age: 1, gender: '男' },
                    { name: '张小二', age: 2, gender: '女' },
                    { name: '张小三', age: 3, gender: '男' },
                ],
                a: {
                    b: {
                        c: 'Jason Chen'
                    }
                }
            },

            computed: {
                // 计算属性也是响应式的 ( watcher )
            },

            watch: {
                // 监听什么属性, 这个属性是支持路径语法
                // 也是使用 watcher 实现
                // 'a.b.c': ( oldV, newV ) {  }
            }

        });
    </script>
</body>

</html>